<template>
	<view class="app"> 
		<u-sticky>
			<view class="order-tabs">
				<u-tabs :is-scroll="false" active-color="#F16325"  :list="orderStatus" name="orderTabs" :current="tabIndex" @change="orderTabsChange"></u-tabs>
			</view>
		</u-sticky> 
		<view class="order-list" v-if="list.length>0">
			<view class="subtitle" @click="gotoPage('/pageA/storeorder/storeorder')">
				<image class="image" src="https://admin.cqycgyl.com/uploads/20250915/6327513b04ceff998793c17a6bc98d58.png"></image>
				<text class="title">对店付款订单</text>
				<text class="watch">
					查看订单
					<uni-icon name="arrow-right"></uni-icon>
				</text>
			</view>
			<view class="maincard" v-for="(item,index) in list" :key="index" @click="GotoInfo(item)">
				<view class="card-top">
						<view class="card-left">
							<image class="top-icon" src="https://admin.cqycgyl.com/uploads/20250918/5a09bd13c59ec56ac112761d5e27e5f4.png"></image> <text style="color: black;">云仓优送</text>
						</view>
						<view class="card-right" :style="{'color':item.state == 7?'#5A5A5A':''}">
							{{item.state == 1?"待支付":item.state == 2?"待发货":item.state == 3?"待收货":item.state == 4?"待评论":item.state == 6?"已完成":item.state == 7?"已取消":'售后'}}
						</view>
				</view>
				<view class="card-main">
					<image :src="item.goods[0].image" mode="" style="width: 144rpx;height: 144rpx;"></image>
					<view class="main-right">
						<view class="right-top">
							<view class="right-top-sp">
								{{item.goods[0].title}}
							</view>
							<view class="right-top-my">
								<text style="font-size: 20rpx;">￥</text>{{item.goods[0].price}}
							</view>
						</view>
						<view class="gui">
							{{item.goods[0].difference}}
						</view>
					</view>
				</view>
				<view class="money">
					<text style="font-size: 24rpx;">{{item.state == 1?'应付款:￥':item.state == 7?'应付款:￥':'实付:￥'}}</text>{{item.pay.actual_payment}}
				</view>
				<view class="card-btn" v-if="item.state == 1">
					<view class="card-btn1" @click.stop="cancel(item)">
						取消订单
					</view>
					<view class="card-btn2" @click.stop="Pay(item)">
						立即支付
					</view>
				</view>
				<view class="card-btn" v-if='item.state == 2'>
					<view class="card-btn1" @click.stop="urge">
						催发货
					</view>
					<view class="card-btn1" @click.stop="changeaddress(item)">
						修改地址
					</view>
				</view>
				<view class="card-btn" v-if='item.state == 4'>
					<view class="card-btn1" style="border: none;"></view>
					<view class="card-btn3" >
						待评价
					</view>
				</view>
				<view class="card-btn"  v-if='item.state == 7' >
					<view class="card-btn1" style="border: none;"></view>
					<view class="card-btn1" @click.stop="Delete(item)">
						删除订单
					</view>
				</view>
				<view class="card-btn" v-if="item.state == 3">
					<view class="card-btn1">
						查看物流
					</view>
					<view class="card-btn2" @click.stop="querenshou(item)">
						确认收货
					</view>
				</view>
			</view>
			<u-modal v-model="show" :content="content" :show-cancel-button='true' @cancel='can' @confirm='confirm' cancel-text='再看看'></u-modal>
			<u-modal v-model="show1" :content="content1" :show-cancel-button='true' @cancel='can1' @confirm='confirm1' cancel-text='再看看'></u-modal>
		</view>
		<view class="subtitle" v-else>
				<image class="image" src="https://admin.cqycgyl.com/uploads/20250915/6327513b04ceff998793c17a6bc98d58.png"></image>
				<text class="title">对店付款订单</text>
				<text class="watch">
					查看订单
					<uni-icon name="arrow-right"></uni-icon>
				</text>
		</view>
		<view style="padding-top: 200rpx;" v-if="list.length == 0">
			
			<u-empty text="暂无订单" mode="order"></u-empty>
		</view>
	</view>
</template>
<script>  
	export default {
		data() {
			return {
				tabIndex:0,
				loadMoreStatus:"loadmore",
				orderStatus:[{
					name: '全部',
					value:'0', 
				}, {
					name: '待支付',
					value:'1'
				}, {
					name: '待发货',
					value:'2'
				}, {
					name: '待收货',
					value:'3'
				},
				{
					name: '待评价',
					value:'4'
				}],
				orderParams:{
					pagesize:10,
					page:1,  
				},
				list:[],
				show:false,
				show1:false,
				count:'',
				item:'',
				cancelshow:false,
				content:'确认取消本订单？',
				content1:'确认删除本订单？'
			}
		}, 
		computed:{
			 
		},
		
		methods:{
			gotoPage(url){
				uni.navigateTo({
					url: url
				})
			},
			querenshou(item){
				console.log(item,'案件扩大');
				let obj = {
					id:item.id
				}
				uni.showModal({
					title: '提示',
					content: '确定收货？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
					if(res.confirm) {  
						this.$u.api.shop.confirmOrder(obj).then(res =>{
							console.log(res);
							if(res.code == 1){
								uni.showToast({
								    title: '收货成功！',
								    icon: 'success'
								})
								setTimeout(()=>{
									this.list = []
									this.orderParams.page = 1
									this.loadList()
								},1000)
							}else{
								uni.showToast({
								    title: res.msg,
								    icon: 'none'
								})
							}
						}).catch(req =>{
							uni.showToast({
							    title: req.msg,
							    icon: 'none'
							})
						})
					} else {  
						}  
					} 
				})
			
			},
			changeaddress(item){
					this.$u.api.shop.getOrderInfo({id:item.id}).then(res =>{
						uni.navigateTo({
							url:`../../pageA/address/index?she=${true}&order_id=${res.data.id}&page=${4}`
						})
						uni.setStorageSync('tabIndex',this.tabIndex)
					})
			},
			Pay(item){
				let that = this
									
				// this.$u.api.shop.getPay({order_id:item.id}).then(res =>{
				// 	let url = 'https://pay.tzbank.com:11112/api/wc/cashier/wakeupCashier?businessCstNo=12163&platMerCstNo=8339559843014639833&orderNoList=8970277344908417923'
				// 	uni.navigateTo({
				// 		url:`/pages/webview/index?url=${encodeURIComponent(JSON.stringify(url))}`
				// 	})
				// })
					
					
				this.$u.api.shop.getOrderInfo({id:item.id}).then(res =>{
					console.log(res,444)
					if(res.code == 1){
						this.data = res.data
						if((this.data.pay.actual_payment-0.01)>=0){
							this.$u.api.shop.WXPay({order_id:item.id}).then(req =>{
								if(req.code == 1){
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: req.data.timeStamp,
										nonceStr: req.data.nonceStr,
										package: req.data.package,
										signType: req.data.signType,
										paySign: req.data.paySign,
										success: function(ress) {
											uni.redirectTo({
												url:`./Paysuccess?id=${that.data.id}`
											})
										},
										fail: function(err) {
																
										}
									});
								}else{
									uni.showToast({
									    title: req.msg,
									    icon: 'error'
									});
								}
							})
						}else{
							this.$u.api.shop.WXPay({order_id:this.order_id}).then(req =>{
								if(req.code == 1){
									uni.redirectTo({
										url:`./Paysuccess?id=${this.data.id}`
									})
								}else{
									uni.showToast({
									    title: req.msg,
									    icon: 'error'
									});
								}
							})
						}
					}
				})
			},
			GotoInfo(item){
				if(item.state == 1){
					uni.navigateTo({
						url:`./AwaitPay?order_id=${item.id}`
					})
					uni.setStorageSync('tabIndex',this.tabIndex)
				}else if(item.state == 2){
					uni.navigateTo({
						url:`./AwaitShipments?order_id=${item.id}`
					})
					uni.setStorageSync('tabIndex',this.tabIndex)
				}else if(item.state == 7){
					uni.navigateTo({
						url:`./Canceled?order_id=${item.id}`
					})
					uni.setStorageSync('tabIndex',this.tabIndex)
				}else if(item.state == 3){
					uni.navigateTo({
						url:`./Receiving?order_id=${item.id}`
					})
					uni.setStorageSync('tabIndex',this.tabIndex)
				}else if(item.state == 4){
					uni.navigateTo({
						url:`./comments?order_id=${item.id}`
					})
					uni.setStorageSync('tabIndex',this.tabIndex)
				}
			},
			pull(item){
				this.count = item.id
			},
			urge(){
				uni.showToast({
				    title: '催发货成功！',
				    icon: 'success'
				})
			},
			can(){
				this.show=false
			},
			can1(){
				this.show1=false
			},
			Delete(item){
				this.item = item
				this.show1 = true
			},
			confirm(){
				this.$u.api.shop.cancelOrder({id:this.item.id}).then(res =>{
					if(res.code == 1){
						uni.showToast({
						    title: '取消成功！',
						    icon: 'success'
						})
						setTimeout(()=>{
							this.list = []
							this.orderParams.page = 1
							this.loadList()
						},1000)
					}
				})
			},
			confirm1(){
				this.$u.api.shop.DeleteOrder({id:this.item.id}).then(res =>{
					if(res.code == 1){
						uni.showToast({
						    title: '删除成功！',
						    icon: 'success'
						})
						setTimeout(()=>{
							this.list = []
							this.orderParams.page = 1
							this.loadList()
						},1000)
					}else{
						uni.showToast({
						    title: res.msg,
						    icon: 'error'
						})
					}
				}).catch(req =>{
					uni.showToast({
					    title: res.msg,
					    icon: 'error'
					})
				})
			},
			cancel(item){
				this.show = true
				this.item = item
			},
			orderTabsChange(e){ 
				this.tabIndex = e
			
				this.list = []
				this.orderParams.page = 1
				this.loadList()
			},
			onReachBottom() { 
				this.loadList()
			},
			loadList(flag){
				this.loadMoreStatus = 'loading'; 
				if(this.tabIndex == 0){
					this.orderParams.state = ''
				}else{
					this.orderParams.state = this.orderStatus[this.tabIndex].value
				}
				this.$u.api.order.getShopOrder(this.orderParams).then(res => {
					this.loadMoreStatus = 'loadmore'; 
					
					if(res.data.data == undefined || res.data.data.length <= 0){
						this.loadMoreStatus = 'nomore'; 
						return false
					} 
					
					this.list = [...this.list,...res.data.data]
					this.orderParams.page += 1
				}).catch(err => {
					this.loadMoreStatus = 'loadmore'; 
				})
			},
			cancelOrder(orderId){
				this.$u.api.order.cancelOrder({orderId}).then(res => {
					this.$u.toast(res.msg)
					this.orderTabsChange(this.tabIndex)
				}).catch(err => {
				})
			},
			
		},
		onLoad(option){
			if(option?.tabIndex){
				 this.tabIndex = option?.tabIndex
				 uni.setStorageSync('tabIndex',option?.tabIndex)
			} 
		}, 
		onShow(){
			this.list = []
			let index = uni.getStorageSync('tabIndex')
			if(index != '' && index != null && index !=undefined){
				this.tabIndex = index
			}
			this.orderParams.page = 1
			this.loadList()
		},
		onReady() { 
			let _this = this
			uni.$on('orderListUpdate', function(data) { 
				_this.orderTabsChange(_this.tabIndex)
			})
		},
		onUnload() { 
			uni.$off('orderListUpdate') 
			
		}
	}
</script>
<style lang="scss" scoped>  
	.order-list{margin-top: 20rpx;}
	.order-btn-row{ display: flex;}
	.order-btn-right{flex:1;text-align: right;}
	.order-info-row{  display: flex; align-items: center;margin-bottom: 10rpx;}
	.order-info-row label{ flex-shrink: 0;}
	.order-info-row text{ flex:1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
	.subtitle{
		width: 690rpx;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		margin-top: 12rpx;
		image{
			width: 36rpx;
			height: 36rpx;
		}
		title{
			font-size: 28rpx;
			color: #333333;
			margin-left: 12rpx;
		}
		.watch{
			font-size: 24rpx;
            color: #999999;
			margin-left: auto;
		}
	}
	/deep/ .order-btn-right .u-btn{margin-left: 20rpx !important;}
	/deep/ .u-load-more-wrap{margin:20rpx !important;}
	.maincard{
		width: 690rpx;
		height: 436rpx;
		background-color: white;
		border-radius: 16rpx;
		margin-left: 30rpx;
		position: relative;
		margin-top: 20rpx;
	}
	
	.card-top{
		width: 630rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
	}
	.card-left{
		width: 544rpx;
		height: 24rpx;
		font-size: 28rpx;
		color: #999999;
		line-height: 24rpx;
		display: flex;
		align-items: center;
		.top-icon{
			width: 48rpx;
			height: 48rpx;

		}
		text{
			margin-left: 16rpx;
		}
	}
	.card-right{
		width: 86rpx;
		height: 24rpx;
		line-height: 24rpx;
		font-size: 28rpx;
		color: #E1262A;
	}
	.card-main{
		width: 630rpx;
		height: 144rpx;
		margin-left: 30rpx;
		display: flex;
	}
	.main-right{
		width: 486rpx;
		height: 144rpx;
	}
	.right-top{
		width: 100%;
		height: 28rpx;
		display: flex;
	}
	.right-top-sp{
		width: 398rpx;
		height: 28rpx;
		line-height: 28rpx;
		color: black;
		font-size: 28rpx;
		margin-left: 12rpx;
		font-weight: bold;
		text-overflow:ellipsis;/*省略号 */
		 white-space:nowrap;/*溢出时不换行 */
		 overflow:hidden;/*溢出时隐藏 */
	}
	.right-top-my{
		width: 88rpx;
		height: 28rpx;
		line-height: 28rpx;
		color: black;
		font-size: 28rpx;
	}
	.gui{
		margin-left:12rpx;
		margin-top: 24rpx;
		font-size: 24rpx;
		color: #888888;
	}
	.money{
		width: 630rpx;
		margin-left: 30rpx;
		height: 30rpx;
		margin-top: 36rpx;
		text-align: right;
		line-height: 30rpx;
		color: black;
		font-size: 40rpx;
	}
	.card-btn{
		width: 388rpx;
		height: 76rpx;
		position: absolute;
		right: 30rpx;
		bottom: 24rpx;
		display: flex;
		justify-content: space-between;
	}
	.card-btnleft{
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		left: 42rpx;
		bottom: 40rpx;
	}
	.card-btn1{
		width: 184rpx;
		height: 76rpx;
		text-align: center;
		line-height: 76rpx;
		border: 1px #CECECE solid;
		color: black;
		font-size: 28rpx;
		border-radius: 38rpx;
	}
	.card-btn3{
		width: 184rpx;
		height: 76rpx;
		text-align: center;
		line-height: 76rpx;
		background-color: #36BE6A;
		color: white;
		border-radius: 38rpx;
		font-size: 28rpx;
	}
	.card-btn2{
		width: 184rpx;
		height: 76rpx;
		text-align: center;
		line-height: 76rpx;
		background-color: #F16325;
		color: white;
		border-radius: 38rpx;
		font-size: 28rpx;
	}
	.cancel-tp{
		width: 196rpx;
		height: 90rpx;
		position: absolute;
		left: 28rpx;
		bottom: 85rpx;
	}
</style>